<template>
    <div class="all-goods">

        <div class="mb8">
            <el-button type="success" icon="el-icon-download" size="mini" @click="handleExport"
                       v-hasPermi="['oms:productDetail:export']">导出</el-button>
        </div>

        <el-table v-loading="loading" :data="tableList">
            <el-table-column label="商品图片" prop="productImage">
                <div slot-scope="{row}">
                    <div class="table-cell-img">
                        <el-image :src="row.productImage" :preview-src-list="[row.productImage]">
                            <i slot="error" class="el-icon-picture-outline"></i>
                        </el-image>
                    </div>
                </div>
            </el-table-column>
            <el-table-column label="物料编号" prop="productNo"/>
            <el-table-column label="颜色" prop="productColour"/>
            <el-table-column label="规格" prop="productSku"/>
            <el-table-column label="名称" prop="productName"/>
            <el-table-column label="客户" prop="productCustomer"/>
            <el-table-column label="数量" prop="productNum"/>
        </el-table>
        <!--分页-->
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                    @pagination="getList"/>

    </div>
</template>

<script>
import {responseEnum} from "../../../../const/const";
import {getAllGoodsList} from "../api";

export default {
    components: {},
    props: ['taskId'],
    data() {
        return {
            loading: true,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                taskId: this.taskId
            },
            // 总条数
            total: 0,
            // 表格数据
            tableList: [],
        };
    },
    mounted() {
        this.getList()
    },
    methods: {
        /** 查询列表 */
        getList() {
            this.loading = true;
            getAllGoodsList(this.queryParams).then(res => {
                if (res.code === responseEnum.success) {
                    this.tableList = res.data || [];
                    this.total = res.total || 0;
                }
            }).finally(() => this.loading = false);
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('/oms/omstask/taskAllParoductexport', this.queryParams, `任务_所有商品_${new Date().getTime()}.xlsx`)
        },
    }
};

</script>

<style lang="scss" scoped>

</style>
